<template>
	<div class="case">
		<div class="breadcrumbs">
			<div class="container">
				<div class="row">
					<div class="col-lg-4 col-sm-4">
						<h1>
							案例赏析
						</h1>
					</div>
					<div class="col-lg-8 col-sm-8">
						<ol class="breadcrumb pull-right">
							<li>
								<a href="#">
									首页
								</a>
							</li>
							<li class="active">
								/案例赏析
							</li>
						</ol>
					</div>
				</div>
			</div>
		</div>
		<!--类型-->
		<div class="type">
			<div v-for="item in type" :key="item" :class="selType === item ? 'type-item active':'type-item'" @click="changeType(item)">{{item}}</div>
		</div>
		<div class="case-content">
			<div class="case-item" @mouseenter="isshow1=true" @mouseleave="isshow1=false" v-for="(item, i) in selCase" :key="i">
				<h3 class="case-title">{{item.title}}</h3>
				<img :src="item.repImgId" alt="" class="case-img">
				<!--遮罩层-->
				<transition name="fade">
					<div v-show="isshow1" class="case-shade">
						<router-link :to="{ path:'/case-details',query:{data:item} }" class="btn">></router-link>
						<div class="btn" @click="showImg(item.repImgId)">
							+
						</div>
					</div>
				</transition>
			</div>
		</div>
		<div class="shade" v-show="isshow2" @click="isshow2=false">
			<img :src="imgurl" alt="" class="shade-img" @click.stop>
		</div>
	</div>
</template>

<script>
	import {
		CASE_API
	} from "../utils/api"
	export default {
		data() {
			return {
				isshow1: false,
				isshow2: false,
				type: [
					"市政污水",
					"工业废水",
					"医疗废水",
					"垃圾治理（焚烧）",
					"垃圾治理（填埋）"
				],
				selType: "市政污水",
				//所有类型案例
				case: [],
				//选中的类型
				selCase: [],
				//放大的图片
				imgurl: ""
			}
		},
		methods: {
			changeType(item) {
				//清空选中的类型案例
				this.selCase = [];
				this.selType = item;
				//选择案例类型
				this.case.forEach(item => {
					if (item.parentId === (this.type.indexOf(this.selType) + 1)) {
						this.selCase.push(item)
					}
				})
				console.log(this.selCase)
			},
			async getCase() {
				let {
					data
				} = await CASE_API({
					artical: "123"
				})
				this.case = data.list
				// console.log(this.case)
				this.case.forEach(item => {
					if (item.parentId === 1) {
						this.selCase.push(item)
					}
				})
			},
			showImg(url) {
				this.imgurl = url;
				console.log(url)
				console.log(this.imgurl)
				this.isshow2 = true;
			}
		},
		created() {
			this.getCase()
		}
		// watch:{
		//   selType:function(newVal, oldVal){
		//     console.log(newVal)
		//   }
		// }
	}
</script>

<style lang="less" scoped>
	.breadcrumbs {
		background: #34495e;
		color: #fff;
		padding: 30px 0;
		margin-bottom: 40px;
		width: 1903px;
		margin-left: -352px;
		height: 28px;
	}

	.breadcrumbs h1 {
		font-size: 24px;
		font-weight: 600;
		margin: 3px 0 0;
		text-transform: uppercase;
		margin-left: 19%;
		margin-top: 0%;
	}

	.breadcrumb {
		margin-bottom: 0;
		background: none;
		font-size: 16px;
		margin-left: 75%;
		margin-top: -23px;
	}

	.breadcrumb li a {
		color: #48cfad;
	}

	.breadcrumb li.active {
		color: #fff;
	}

	.breadcrumb>li {
		display: inline-block;
	}

	.case{
	  width: 1200px;
	  margin: 20px auto;
	  margin-bottom: 80px;
	}
	.type{
	  display: flex;
	  margin-bottom: 20px;
	}
	.type-item{
	  width: 150px;
	  height: 40px;
	  text-align: center;
	  line-height: 40px;
	  border-radius: 5px;
	}
	.active{
	  background: #48CFAD;
	  color: #fff;
	}
	.case-content{
	  display: flex;
	/*  justify-content: space-between; */
	  flex-wrap: wrap;
	}
	.case-item{
	  width: 370px;
	  height: 500px;
	  margin-right: 20px;
	  position: relative;
	}
	.case-title{
	  text-align: center;
	  color:#797979;
	  font-weight: 400;
	  font-size: 20px;
	  height: 40px;
	}
	.case-img{
	  width: 370px;
	  height: 460px;
	}
	.case-shade{
	  width: 370px;
	  height: 500px;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  background-color: rgba(0,0,0,0.3);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	.fade-enter-active,
	.fade-leave-active {
	  transition: opacity 2.5s
	}
	.fade-enter,
	.fade-leave-active {
	  opacity: 0
	}
	.btn{
	  width: 20px;
	  height: 20px;
	  border-radius: 10px;
	  background: #fff;
	  text-align: center;
	}
	.shade{
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  text-align:center;
	  background-color: rgba(0,0,0,0.3);
	}
	.shade-img{
	  width: 520px;
	  height: 650px;
	  margin: 0 auto;
	}
</style>
